<ion-header>
    <ion-toolbar content-page>
        <!--<ion-buttons start>-->
        <!--<button ion-button icon-only navPop>-->
        <!--<i class="back"></i>-->
        <!--</button>-->
        <!--</ion-buttons>-->
        <ion-title *ngIf="!showRoster">
            活动
        </ion-title>
        <ion-title *ngIf="showRoster">
            <button class="nav-btn nav-btn_active">活动</button>
            <button class="nav-btn" (click)="toRosterList()">名单</button>
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content (ionScroll)="lazyLoad()">
    <ion-refresher (ionRefresh)="getPreviewList($event, false)" [pullMax]="800">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <div class="switch-bar row" ion-fixed>
        <div class="switch-btn col" [class.switch-btn_selected]="currentView === 0"
             (click)='switchCurrentView(0)'>营销活动
        </div>
        <div class="switch-btn col" [class.switch-btn_selected]="currentView === 1"
             (click)='switchCurrentView(1)'>增员活动
        </div>
        <span class="switch-sign" [class.sign-change]="currentView === 1"></span>
    </div>
    <div class="list-title" ion-fixed>
        <span>共{{activityList.length + previewList.length}}个活动</span>
        <div class="filter-btn" (click)="toFilterPage()">
            <i class="filter"></i>筛选
        </div>
    </div>

    <div class="card-list">
        <div *ngIf="activityList.length === 0 && previewList.length === 0 && isLoaded" class="no-data">
            <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
            <div class="no-data-txt">没有相关数据</div>
        </div>
        <!--预览的列表-->
        <div class="msl-card" #wrapper *ngFor="let activity of previewList" (click)="toActivityDetail(activity)">
            <adp-lazyload [lazysrc]="activity.bannerUrl"
                          [distance]="0" [content]="content" [wrapper]="wrapper"
                          [className]="imgClassName"></adp-lazyload>
            <div class="msl-card-ft">
                <div class="msl-card_title">
                    <span>{{activity.name}}</span>
                    <div class="msl-card-label msl-card-label_danger">预览</div>
                </div>
                <div class="msl-card_time">
                    <span>{{activity.startTime | unixRsolvedPipe:'YYYY/MM/DD'}} - {{activity.endTime | unixRsolvedPipe:'YYYY/MM/DD'}}</span>
                    <div *ngIf="currentView===0">{{computeType(activity.type)}}</div>
                </div>
            </div>
        </div>
        <!--真正的列表-->
        <div class="msl-card" #relWrapper *ngFor="let activity of activityList" (click)="toActivityDetail(activity)">
            <adp-lazyload [lazysrc]="activity.bannerUrl"
                          [distance]="0" [content]="content" [wrapper]="relWrapper"
                          [className]="imgClassName"></adp-lazyload>
            <div class="msl-card-ft">
                <div class="msl-card_title">
                    <span>{{activity.name}}</span>
                    <div class="msl-card-label msl-card-label_warn" *ngIf="activity.status === 0">未开始</div>
                    <div class="msl-card-label msl-card-label_success" *ngIf="activity.status === 1">进行中</div>
                    <div class="msl-card-label msl-card-label_primary" *ngIf="activity.status === 2">已结束</div>
                </div>
                <div class="msl-card_time">
                    <span>{{activity.startTime | unixRsolvedPipe:'YYYY/MM/DD'}} - {{activity.endTime | unixRsolvedPipe:'YYYY/MM/DD'}}</span>
                    <div *ngIf="currentView===0">{{computeType(activity.type)}}</div>
                </div>
            </div>
        </div>
    </div>
</ion-content>

